<template>
    <div>
        <el-card>
            <el-table :data="orderData" stripe style="width: 100%" border>
                <el-table-column
                    prop="oId"
                    label="挂号单号"
                    width="90px"
                ></el-table-column>
                <el-table-column
                    prop="pId"
                    label="本人id"
                    width="75px"
                ></el-table-column>
                <el-table-column
                    prop="pName"
                    label="姓名"
                    width="75px"
                ></el-table-column>
                <el-table-column
                    prop="dId"
                    label="医生id"
                    width="75px"
                ></el-table-column>
                <el-table-column
                    prop="dName"
                    label="医生姓名"
                    width="75px"
                ></el-table-column>

                <el-table-column
                    prop="oStart"
                    label="挂号时间"
                    width="195px"
                ></el-table-column>
                <!-- <el-table-column
                    prop="oEnd"
                    label="结束时间"
                    width="185px"
                ></el-table-column> -->
                <el-table-column
                    prop="dPrice"
                    label="挂号费用"
                    width="85px"
                ></el-table-column>

                
                <el-table-column
                    prop="oIfRegi"
                    label="预约缴费"
                    width="150"
                >
                    <template slot-scope="scope">
                        <el-tag
                            type="success"
                            v-if="scope.row.oIfRegi === 1"
                            >已缴费</el-tag
                        >
                        <!-- <el-tag type="danger" v-if="scope.row.oIfRegi==0">未缴费</el-tag> -->
                        <el-button
                            type="warning"
                            icon="iconfont icon-r-mark1"
                            style="font-size: 14px"
                            v-if="
                                scope.row.oIfRegi !== 1 
                            "
                            @click="regiClick(scope.row.oId)"
                        >
                            点击缴费</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="oTotalPrice"
                    label="需缴费用/元"
                    width="80px"
                ></el-table-column>
                
                <el-table-column
                    prop="oPriceState"
                    label="其他缴费"
                    width="150"
                >
                    <template slot-scope="scope">
                        <el-tag
                            type="success"
                            v-if="scope.row.oPriceState === 1"
                            >已缴费</el-tag
                        >
                        <!-- <el-tag type="danger" v-if="scope.row.oPriceState === 0 && scope.row.oState === 1">未缴费</el-tag> -->
                        <el-button
                            type="warning"
                            icon="iconfont icon-r-mark1"
                            style="font-size: 14px"
                            v-if="
                                scope.row.oPriceState !== 1 &&
                                scope.row.oState === 1
                            "
                            @click="priceClick(scope.row.oId, scope.row.dId)"
                        >
                            点击缴费</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column label="挂号队列">
                    <template slot-scope="scope">
                        <el-button
                            type="success"
                            icon="iconfont icon-r-find"
                            style="font-size: 14px"
                            @click="seeQueue(scope.row.dId)"
                            v-if="
                            scope.row.oState === 0 &&
                            scope.row.oIfRegi === 1
                            "
                            
                            > 
                            查看
                            </el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="oState" label="就诊状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag
                            type="success"
                            v-if="
                                scope.row.oState === 1 &&
                                scope.row.oPriceState === 1
                            "
                            >已完成</el-tag
                        >
                        <el-tag
                            type="danger"
                            v-if="
                                scope.row.oState === 0 && scope.row.oState === 0
                            "
                            >未完成</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="报告单">
                    <template slot-scope="scope">
                        <el-button
                            type="success"
                            icon="iconfont icon-r-find"
                            style="font-size: 14px"
                            @click="seeReport(scope.row.oId)"
                            v-if="
                                scope.row.oState === 1 &&
                                scope.row.oPriceState === 1 
                            "
                            > 查看</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 评价对话框 -->
        <!-- <el-dialog title="用户评价" :visible.sync="starVisible">
            <div>
                <h3>
                    请对工号：{{ dId }}&nbsp;医生：{{ dName }}&nbsp;进行评价
                </h3>
            </div>
            <div>
                <el-rate v-model="star" show-text> </el-rate>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="starVisible = false" style="font-size: 18px;"><i class="iconfont icon-r-left" style="font-size: 20px;"></i> 取 消</el-button>
                <el-button type="primary" @click="starClick" style="font-size: 18px;"><i class="iconfont icon-r-yes" style="font-size: 20px;"></i> 确 定</el-button>
            </div>
        </el-dialog> -->
        <el-dialog title="挂号队列" :visible.sync="queueVisible">
            <div>
                <el-row>
                    <el-col :span="12">
                        <span>医生姓名：</span>
                        <span>{{queueInfo.dName}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span>科室：</span>
                        <span>{{queueInfo.dSection}}</span>
                    </el-col>
                </el-row>
            </div>
            <div style="">
                <el-table :data="queueInfo.queueData" style="width: 100%" border>
                    <el-table-column
                        type="index" width="200px"
                        label="序号">
                    </el-table-column>
                    <el-table-column
                        prop="oStart"
                        label="预约时间">
                    </el-table-column>
                    <el-table-column
                        prop="pName"
                        label="患者姓名">
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeQueueDialog" style="font-size: 18px;"><i class="iconfont icon-r-left" style="font-size: 20px;"></i> 关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from "@/utils/request.js";
import jwtDecode from "jwt-decode";
import { getToken } from "@/utils/storage.js";
export default {
    name: "MyOrder",
    data() {
        return {
            userId: 1,
            orderData: [],
            // star: 5,
            // starVisible: false,
            dId: 1,
            dName: "",
            queueVisible: false,
            queueInfo: {
                dName: '',
                dSection: '',
                queueData: []
            }
        };
    },
    methods: {
        //评价点击确认
        // starClick() {
        //     console.log(this.star);
        //     console.log(this.dId);
        //     request
        //         .get("doctor/updateStar", {
        //             params: {
        //                 dId: this.dId,
        //                 dStar: this.star,
        //             },
        //         })
        //         .then((res) => {
        //             if (res.data.status !== 200)
        //                 return this.$message.error("评价失败");
        //             this.$message.success("谢谢您的评价");
        //             this.starVisible = false;
        //         });
        // },
        //查看报告单
        seeReport(id) {
            window.location.href =
                "http://localhost:9281/patient/pdf?oId=" + id;
        },
        //查看挂号队列
        seeQueue(dId){
            this.queueVisible = true;
            //查询队列信息
            const self = this;
            request
                .get("order/queue", {
                    params: {
                        dId: dId,
                    },
                })
                .then((res) => {
                    console.log("Response from backend:",res);
                    if (res.data.status!=200) {
                        self.$message.error("查询挂号队列信息失败");
                        return;
                    }
                    self.queueInfo = res.data.data
                });
        },
        //关闭挂号队列窗口
        closeQueueDialog(){
            this.queueVisible = false;
        },
        //点击预约缴费按钮
        regiClick(oId, dId)  {
            request
                .get("order/canPay", {
                    params: {
                        oId: oId,
                    },
                })
                .then((res) => {
                    console.log("Response from backend:",res);
                    if (res.data.status!=200) {
                        this.$message.error("当前不在缴费时间内");
                        return;
                    }
                    this.$message.success("恭喜您已经挂号成功");
                    this.requestOrder();
                });
                
        },
        //点击缴费按钮
        priceClick(oId, dId) {
            request
                .get("order/updatePrice", {
                    params: {
                        oId: oId,
                    },
                })
                .then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error("请求数据失败");
                        return;
                    }
                    this.$message.success("单号 " + oId + " 缴费成功！");
                    request
                        .get("admin/findDoctor", {
                            params: {
                                dId: dId,
                            },
                        })
                        .then((res) => {
                            if (res.data.status !== 200)
                                return this.$message.error("请求数据失败");
                            this.dId = res.data.data.dId;
                            this.dName = res.data.data.dName;
                        });
                    // this.starVisible = true;
                    this.requestOrder();
                });
        },
        //请求挂号信息
        requestOrder() {
            request
                .get("patient/findOrderByPid", {
                    params: {
                        pId: this.userId,
                    },
                })
                .then((res) => {
                    if (res.data.status !== 200)
                        this.$message.error("请求数据失败");
                    this.orderData = res.data.data;
                    console.log("Response data:",res.data);
                    console.log("Order data:",this.orderData);
                    this.orderData.forEach((order, index) => {
                console.log(`Order ${index} oIfRegi:`, order.oIfRegi);
            });
                    //this.orderData.dSection = res.data.data.map(item => item.doctor.dSection);
                    //console.log(res.data.data.map(item => item.doctor.dSection));
                    console.log(this.orderData.oId);
                    console.log(this.orderData.pName);
                    console.log(res);
                });
        },
        //token解码
        tokenDecode(token) {
            if (token !== null) return jwtDecode(token);
        },
    },
    created() {
        // 解码token
        //this.orderData.pName = this.tokenDecode(getToken()).pName;
        //this.orderData.pCard = this.tokenDecode(getToken()).pCard;
        this.userId = this.tokenDecode(getToken()).pId;
        console.log(this.orderData.pName);
        //this.orderData.pName = "dasda"
        this.requestOrder();
    },
};
</script>
<style lang="scss" scoped>
.el-dialog div {
    text-align: center;
    margin-bottom: 8px;
}
</style>